<template>
    <div class="article">
        <RouterLink :to="'/article/' + id" class="title"># {{ title }}</RouterLink>
        <p class="content">
            {{ digest }}
        </p>
        <div class="info">
            <span class="info_date item">
                <DateIcon class="info_icon" />
                {{ createTime }}
            </span>
            <span class="info_date item">
                <BrowseIcon class="info_icon" />
                {{ browse }}
            </span>
            <RouterLink :to="'/search/' + categoryName + '/' + SearchEnum.category + '/' + categoryid" class="item">
                <CategoryIcon class="info_icon" />
                {{ categoryName }}
            </RouterLink>
            <RouterLink v-for="(item, i) in tagList" :key="i"
                :to="'/search/' + item.name + '/' + SearchEnum.label + '/' + item.id" class="item">
                {{ item.name }}
            </RouterLink>
        </div>
    </div>
</template>


<script lang="ts" setup>
import DateIcon from '@/components/icons/dateIcon.vue'
import CategoryIcon from '@/components/icons/categoryIcon.vue'
import BrowseIcon from '@/components/icons/browseIcon.vue'
import SearchEnum from '@/components/home/enum/search'
import type Lable from '@/components/home/type/lable'

interface Article {
    id: number
    title: string
    digest: string
    categoryName: string
    categoryid: number
    createTime: string
    isTop: string
    browse: number
    tagList: Lable[]
}

defineProps<Article>();

</script>


<style lang="less" scoped>
.article {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 30px;

    &:last-child {
        margin-bottom: 0;
    }

    .title {
        font-size: 20px;
        font-weight: 600;
        color: var(--title-color);
    }

    .content {
        font-size: 14px;
        color: var(--content-color);
        margin-top: 25px;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        /* 超出几行省略 */
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .info {
        margin-top: 30px;
        display: flex;

        .item {
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: var(--info-color);

            &:last-child {
                margin-right: 0;
            }
        }

        .info_icon {
            width: 14px;
            margin-right: 5px;
            fill: var(--info-color) !important;
        }

        .info_date {
            display: flex;
        }
    }
}
</style>